// pages/picture/pictureDeal/pictureDeal.js
var MCOLOR = require('../../../libs/mcolor')
var half_width = 180;
var perf_width = 230;
var max_proportion = 1;

Page({
  data: {
    image: {},
    mainColor: '',
    funcName: '',
    buttons: MCOLOR.buttons
  },
  onLoad: function (options) {
    this.setData({
      onling: getApp().globalData.onling,
    })
    if (this.data.onling)
      return
    wx.setNavigationBarTitle({
      title: '图片处理'
    })
  },
  onReady: function () {

  },
  onShareAppMessage: function () {

  },
  //选择图片
  _chooseImage() {
    var _this = this
    wx.chooseImage({
      count: 1,
      success(res) {
        console.log("_chooseImage", res)
        var imagePath = res.tempFilePaths[0]
        _this._getImageInfo(imagePath)
      }
    })
  },
  //获取网络图片的信息
  _getImageInfo(image_path) {
    var _this = this
    wx.getImageInfo({
      src: image_path, //服务器返回的图片地址
      success: function (res) {
        //res.path是网络图片的本地地址
        console.log("_getImageInfo", res)
        _this._drawImageOnCanvas(res)
      },
      fail: function (res) {
        //失败回调
      }
    });
  },
  //在画布绘制图片
  _drawImageOnCanvas(image) {
    var _this = this
    var path = image.path
    console.log("_drawImageOnCanvas", path)
    var ctx = wx.createCanvasContext('myCanvas')

    var proportion = image.height / image.width
    if (proportion >= max_proportion) { //使用横向布局
      image.width = half_width
      image.height = Math.round(half_width * proportion)
    } else { //使用纵向布局
      image.width = perf_width
      image.height = Math.round(perf_width * proportion);
    }
    console.log("_drawImageOnCanvas", proportion, image)
    ctx.drawImage(path, 0, 0, image.width, image.height)
    ctx.draw(false, function (e) {
      console.log('draw callback', e)
      _this._getImageDataFromCanvas().then()
    })
    this.setData({
      image: image
    })
  },
  //获取画布上的图片信息
  _getImageDataFromCanvas() {
    return new Promise((resolve, reject) => {
      var _this = this
      var image = this.data.image
      wx.canvasGetImageData({
        canvasId: 'myCanvas',
        x: 0,
        y: 0,
        width: image.width,
        height: image.height,
        success(res) {
          resolve(res)
          console.log("_getImageDataFromCanvas-imageData", res)
          //主颜色
          var mColor = MCOLOR.getImageColor(image, res.data)
          console.log("_getImageDataFromCanvas-mColor", mColor)
          _this.setData({
            mainColor: mColor
          })
        },
        fail(err) {
          console.log(err)
          reject(err)
        }
      })
    })
  },
  //在画布绘制图片信息
  _putImageOnCanvas(imageData) {
    var image = this.data.image
    wx.canvasPutImageData({
      canvasId: "myCanvas1",
      x: 0,
      y: 0,
      width: image.width,
      height: image.height,
      data: imageData,
      success(res) {
        console.log("_putImageOnCanvas-succes", res)
      },
      fail(res) {
        console.error("_putImageOnCanvas-fail", res)
      }
    })
  },
  //功能按钮点击监听
  onFunctionClick(e) {
    console.log(e)
    var id = e.currentTarget.dataset.id
    var name = e.currentTarget.dataset.name
    this._getImageDataFromCanvas().then(res => {
      console.log("_removeColor", res)
      var imageData = MCOLOR.getFunImageData(name, res)
      this._putImageOnCanvas(imageData.data)
      this.setData({
        funcName: name
      })
    }).catch(err => {
      console.log(err);
      wx.showToast({
        title: '请先选择图片!',
        icon: 'none'
      })
    })
  }
})